<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Boldstrap Bootstrap 4 Template 2</title>
    <meta name="description" content="Boldstrap is a free Bootstrap 4 theme by Themes.guide" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="generator" content="Themestr.app">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
    <link href="//cdnjs.cloudflare.com/ajax/libs/ionicons/3.0.0/css/ionicons.css" rel="stylesheet" />
    <link rel="stylesheet" href="theme.css" />
    <link rel="stylesheet" href="template2.css" />
  </head>
  <body data-spy="scroll" data-target="#navbar1" data-offset="60">
    <div class="bg-primary">
        <div class="container">
            <div class="row align-items-center vh-50 py-5">
                <div class="col-xl-5 col-lg-6 ml-auto py-2 text-light order-2 text-center text-lg-left">
                    <h1 class="mb-0">
                        <span>Boldstrap</span>
                    </h1>
                    <p class="lead mb-3"><span>A big, blue sky and no clouds in sight.</span> This font face is Yantramanav. <a class="font-weight-bold text-white" href="http://themestr.app">Themestr.app</a> makes it easy to customize this, and other free Bootstrap 4 themes.</p>
                    <a class="btn btn-outline-light btn-lg mr-2" href="http://themestr.app" target="_new">Customize</a> 
                                                    <div class="btn-group">
                                  <a href="theme.css" class="btn btn-outline-light btn-lg">
                                    Download Theme
                                  </a>
                                  <button type="button" class="btn btn-lg btn-outline-light dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    <span class="sr-only">Downloads</span>
                                  </button>
                                  <div class="dropdown-menu">
                                      <a class="dropdown-item" href="theme.css">theme.css</a>
                                      <a class="dropdown-item" href="theme.min.css">theme.min.css</a>
                                      <div class="dropdown-divider"></div>
                                      <a class="dropdown-item" href="theme.scss">theme.scss</a>
                                      <div class="dropdown-divider"></div>
                                      <a class="dropdown-item" target="new" href="https://github.com/ThemesGuide/bootstrap-themes/tree/master/boldstrap">Full template</a>
                                  </div>
                                </div>  
                </div>
                <div class="col-xl-4 col-lg-6 col mr-auto order-1 order-lg-last align-items-center justify-content-center justify-content-lg-end d-flex">
                     <div class="img-fluid text-white">
                        <svg class="i-desktop" viewBox="0 0 32 32" width="240" height="240" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width=".5">
                            <path d="M10 29 C10 29 10 24 16 24 22 24 22 29 22 29 L10 29 Z M2 6 L2 23 30 23 30 6 2 6 Z"></path>
                        </svg>
                     </div>
                </div>
            </div>
        </div>
    </div>
        <nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-primary" id="navbar1">
        <div class="container">
            <a class="navbar-brand mr-1 mb-1 mt-0" href="../">Bootstrap 4</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsingNavbar">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="navbar-collapse collapse justify-content-center" id="collapsingNavbar">
                <ul class="navbar-nav">
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="themesDd" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                          Themes
                        </a>
                        <div class="dropdown-menu" aria-labelledby="themesDd">
                            
                            
                            <a class="dropdown-item px-2 " href="../signal">Signal</a>
                            
                            <a class="dropdown-item px-2 " href="../greyson">Greyson</a>
                            
                            <a class="dropdown-item px-2 " href="../fresca">Fresca</a>
                            
                            <a class="dropdown-item px-2 " href="../darkster">Darkster</a>
                            
                            <a class="dropdown-item px-2 " href="../hello_kiddie">Hello Kiddie</a>
                            
                            <a class="dropdown-item px-2 " href="../blue_voltage">Blue Voltage</a>
                            
                            <a class="dropdown-item px-2 " href="../hootstrap">Hootstrap</a>
                            
                            <a class="dropdown-item px-2 " href="../herbie">Herbie</a>
                            
                            <a class="dropdown-item px-2 active" href="../boldstrap">Boldstrap</a>
                            
                            <a class="dropdown-item px-2 " href="../lovey">Lovey</a>
                            
                            <a class="dropdown-item px-2 " href="../bootstrap_purple">Bootstrap Purple</a>
                            
                            <a class="dropdown-item px-2 " href="../monotony">Monotony</a>
                            
                            <a class="dropdown-item px-2 " href="../poypull">Poypull</a>
                            
                            <a class="dropdown-item px-2 " href="../tequila">Tequila</a>
                            
                            <a class="dropdown-item px-2" href="https://themestr.app" rel="nofollow" target="_new" title="Bootstrap theme builder">Build your own...</a>
                        </div>
                    </li>
                </ul>
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="layoutDd" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                          Layouts
                        </a>
                        <div class="dropdown-menu" aria-labelledby="layoutDd">
                            <a class="dropdown-item px-2" href="./">Default</a>
                            <a class="dropdown-item px-2" href="./template2.html">Layout 2</a>
                            <a class="dropdown-item px-2" href="./template3.html">Layout 3</a>
                        </div>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#buttons">Buttons</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#navs">Navs</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#cards">Cards</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#modals">Modals</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#typography">Typography</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#forms">Forms</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#grid">Grid</a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDd" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                          More
                        </a>
                        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDd">
                            <a class="dropdown-item px-2" href="#more">Badges</a>
                            <a class="dropdown-item px-2" href="#more">Tooltips &amp; Popups</a>
                            <a class="dropdown-item px-2" href="#more">Progress &amp; Alerts</a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item px-2" href="#more">All</a>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </nav> 
    <main>
        <section class="container">
            <div class="row py-5">
                <div class="col-12 my-auto">
                    <div class="row text-center">
                        <div class="col-lg-4 mb-4">
                            <div class="card h-100">
                                <div class="card-body d-flex flex-column justify-content-center align-items-center">
                                    <h1 class="display-2 text-primary"><span class="ion ion-ios-snow-outline"></span></h1>
                                    <h4 class="card-title text-primary">Unique</h4>
                                    <p class="card-text">Don't like that typical Bootstrap look? Each theme has a <strong>custom look-and-feel</strong>, while maximizing use of Bootstrap without extensive additional CSS & JS.</p>
                                    <a href="#" class="btn btn-primary mt-auto">Button</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 mb-4">
                            <div class="card h-100">
                                <div class="card-body d-flex flex-column justify-content-center align-items-center">
                                    <h1 class="display-2 text-primary"><span class="ion ion-ios-tablet-portrait-outline"></span></h1>
                                    <h4 class="card-title text-primary">Responsive</h4>
                                    <p class="card-text">Based on <strong>mobile-first</strong> Bootstrap 4, all themes are 100% responsive and designed to look great on everything from smartphones to tablets to desktops..</p>
                                    <a href="#" class="btn btn-primary mt-auto">Button</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 mb-4">
                            <div class="card h-100">
                                <div class="card-body d-flex flex-column justify-content-center align-items-center">
                                    <h1 class="display-2 text-primary"><span class="ion ion-ios-construct-outline"></span></h1>
                                    <h4 class="card-title text-primary">Consistent</h4>
                                    <p class="card-text">Themes are crafted with care for design and performance. Like Bootstrap, the themes are built on modern HTML5 & CSS3 standards to ensure consistency and <strong>cross-browser</strong> support.</p>
                                    <a href="#" class="btn btn-primary mt-auto">Button</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
                <section id="buttons" class="pb-5">
            <div class="container">
                <div class="row">
                    <div class="col-md-9">
                        <div class="pb-3">
                            <button type="button" class="btn btn-primary mr-1">Primary #27A2FC</button>
                            <button type="button" class="btn btn-outline-primary">Outline</button>
                        </div>
                        <div class="pb-3">
                            <button type="button" class="btn btn-primary align-bottom btn-lg mr-1">Large</button>
                            <button type="button" class="btn btn-primary align-bottom mr-1">Normal</button>
                            <button type="button" class="btn btn-primary align-bottom btn-sm mr-1">Small</button>
                            <a href="#" class="text-primary">Text</a>
                        </div>
                    </div>
                    <div class="col-md d-none d-sm-block">
                        <h4>Code Explorer</h4>
                        <p>
                        Just hover over any of the Bootstrap 
                        components, and click the 
                        <span class="d-inline-block rounded border align-middle pb-1 px-1 small"><small>&lt;&gt;</small></span>
                        to view or copy the HTML markup for that element.
                        </p>
                    </div>
                </div>
                <div class="row py-2">
                    <div class="col-md-auto col-3">
                        <button class="btn btn-outline-secondary">Secondary</button>
                    </div>
                    <div class="col-md-auto col-3">
                        <button class="btn btn-outline-info">Info</button>
                    </div>
                    <div class="col-md-auto col-3">
                        <button class="btn btn-outline-danger">Danger</button>
                    </div>
                    <div class="col-md-auto col-3">
                        <button class="btn btn-outline-success">Success</button>
                    </div>
                    <div class="col-md-auto col-3">
                        <button class="btn btn-outline-warning">Warning</button>
                    </div>
                    <div class="col-md-auto col-3">
                        <button class="btn btn-outline-light">Light</button>
                    </div>
                    <div class="col-md-auto col-3">
                        <button class="btn btn-outline-dark">Dark</button>
                    </div>
                </div>
                <div class="row py-2">
                    <div class="col-md-auto col-3">
                        <button class="btn btn-secondary">Secondary</button>
                    </div>
                    <div class="col-md-auto col-3">
                        <button class="btn btn-info">Info</button>
                    </div>
                    <div class="col-md-auto col-3">
                        <button class="btn btn-danger">Danger</button>
                    </div>
                    <div class="col-md-auto col-3">
                        <button class="btn btn-success">Success</button>
                    </div>
                    <div class="col-md-auto col-3">
                        <button class="btn btn-warning">Warning</button>
                    </div>
                    <div class="col-md-auto col-3">
                        <button class="btn btn-light">Light</button>
                    </div>
                    <div class="col-md-auto col-3">
                        <button class="btn btn-dark">Dark</button>
                    </div>
                </div>
            </div>
        </section>
        <section id="navs" class="container pb-5">
            <div class="row">
                <div class="col-xl-9 pb-4">
                    <nav class="navbar navbar-expand-md navbar-dark bg-primary mb-2">
                        <a class="navbar-brand" href="#">Light text</a>
                        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
                            <span class="navbar-toggler-icon"></span>
                        </button>
                        <div class="collapse navbar-collapse" id="navbarColor02">
                            <ul class="navbar-nav ml-auto">
                                <li class="nav-item">
                                    <a class="nav-link" href="#" title="Current breakpoint tier">
                                        Tier     
                                        <span class="d-xl-inline d-none">XL</span>
                                        <span class="d-lg-inline d-xl-none d-none">LG</span>
                                        <span class="d-md-inline d-lg-none d-none">MD</span>
                                        <span class="d-sm-inline d-md-none d-none">SM</span>
                                        <span class="d-inline d-sm-none">XS</span>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="#">About</a>
                                </li>
                            </ul>
                        </div>
                    </nav>
                    <nav class="navbar navbar-expand-md navbar-light bg-primary mb-3">
                        <a class="navbar-brand" href="#">Dark text</a>
                        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor03" aria-expanded="false" aria-label="Toggle navigation">
                            <span class="navbar-toggler-icon"></span>
                        </button>
                        <div class="collapse navbar-collapse" id="navbarColor03">
                            <ul class="navbar-nav ml-auto">
                                <li class="nav-item">
                                    <a class="nav-link" href="#">Link</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="#">About</a>
                                </li>
                            </ul>
                        </div>
                    </nav>
                    <div class="card border-0">
                        <ul class="nav nav-tabs">
                            <li class="nav-item">
                                <a class="nav-link active" href="#tab1" data-toggle="tab">Tab</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#tab2" data-toggle="tab">Tab</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#tab3" data-toggle="tab">Tab</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link disabled" href="#tab4" data-toggle="tab">Disabled</a>
                            </li>
                        </ul>
                        <div class="tab-content px-1 pt-3">
                            <div class="tab-pane active" id="tab1">
                                Select a palette, change the <span class="text-primary ">primary</span>, <span class="text-secondary ">secondary</span>, 
                                <span class="text-success ">success</span>, <span class="text-danger ">danger</span>, 
                                <span class="text-info ">info</span>, and <span class="text-warning ">warning</span> colors. 
                                Choose from various Google Fonts, and modify most of the Bootstrap SASS variables. Click to generate your completely custom 
                                Bootstrap theme.
                            </div>
                            <div class="tab-pane" id="tab2">
                                The whole idea is to make the Bootstrap customization process easier, and allow you to visualize changes along the way. 
                                For most users it's designed to be point-and-click, while advanced users can delve into the SASS as desired. It's a 4-step process.
                            </div>
                            <div class="tab-pane" id="tab3">3. Put some more content in your pane here.</div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 pb-4">
                    <ul class="nav nav-pills flex-column mb-3">
                        <li class="nav-item">
                            <a class="nav-link active" href="#">Active</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Link</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Link</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Link</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link disabled" href="#">Disabled</a>
                        </li>
                    </ul>
                    <div class="btn-group mb-3 w-100">
                        <button type="button" class="btn btn-primary btn-block">Dropdown</button>
                        <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <span class="sr-only">Toggle Dropdown</span>
                        </button>
                        <div class="dropdown-menu dropdown-menu-right">
                            <a class="dropdown-item" href="#">Action</a>
                            <a class="dropdown-item" href="#">Link</a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="#">Separated link</a>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section id="cards" class="container pb-5">
            <div class="d-flex my-3">
                <div class="jumbotron w-100 py-5 mx-auto">
                    <h1>Themestr.app</h1>
                    <h4>Theme Builder for Bootstrap</h4>
                    <p class="lead">
                        Rapidy build custom themes for Bootstrap, the world's most 
                        popular front-end component library for mobile-first, 
                        responsive Web apps. <a class="font-weight-bold" href="https://themestr.app">Themestr.app</a> is a customizer and theme creator for Bootstrap. 
                        Choose from a huge collection of color palettes, fonts and SASS variables. Prototype different styles, and 
                        easily generate CSS from SASS to give your projects a unique look-and-feel.
                    </p>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-4 mb-4">
                    <div class="card border-primary h-100">
                        <div class="card-body d-flex flex-column align-items-start">
                            <h4 class="card-title text-primary">Card Outline</h4>
                            <p class="card-text">Themestr.app makes it easy to customize this, and other free Bootstrap 4 themes for your downloading pleasure.</p>
                            <a href="#" class="btn btn-primary mt-auto">Button</a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 mb-4">
                    <div class="card border-primary h-100">
                        <div class="card-body">
                            <div class="list-group">
                                <a href="#" class="list-group-item list-group-item-action active">Dis List Group</a>
                                <a href="#" class="list-group-item list-group-item-action">Custom Colors</a>
                                <a href="#" class="list-group-item list-group-item-action">Google Fonts</a>
                                <a href="#" class="list-group-item list-group-item-action disabled">Ionicons</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 mb-4">
                    <div class="card bg-primary text-white h-100">
                        <div class="card-body d-flex flex-column align-items-start">
                            <h4 class="card-title">Scrollspy</h4>
                            <p class="card-text">The top NavBar utilizes Bootstrap's Scrollspy component. You'll notice when you scroll the page the "active" nav section is highlighted.</p>
                            <a href="https://getbootstrap.com/docs/4.1/components/scrollspy/" class="btn btn-primary border-white mt-auto">Read More</a>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section id="modals" class="container pb-5">
            <div class="row">
                <div class="col-md-12">
                    <div class="container-fluid">
                        <div class="position-relative" style="z-index:1000">
                            <div id="myModal" class="modal d-block position-relative" tabindex="-1" role="dialog" aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h3>Modal</h3>
                                        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                                    </div>
                                    <div class="modal-body">
                                        <p>This is a basic Bootstrap 4 modal. The modal also comes in a <a href="#modal-sm" data-toggle="modal">smaller</a> and <a href="#modal-lg" data-toggle="modal">larger</a> sizes.</p>
                                        <p>
                                            What will you put in your modal? Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                                            in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan. Aliquam in felis sit amet augue.
                                        </p>
                                    </div>
                                    <div class="modal-footer">
                                        <button class="btn" data-dismiss="alert" aria-hidden="true">Close</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-9"></div>
            </div>
        </section>
        <section id="typography" class="container pb-5">
            <div class="row">
                <div class="col-12">
                    <h4><a target="_new" href="https://fonts.google.com/specimen/Yantramanav">Yantramanav</a></h4>
                </div>
                <div class="col-xl-4">
                    <h6>Heading 6</h6>
                    <h5>Heading 5</h5>
                    <h4>Heading 4</h4>
                    <h3 class="text-truncate">Heading 3</h3>
                    <h2 class="text-truncate">Heading 2</h2>
                    <h1 class="text-truncate">Heading 1</h1>
                    <p class="lead">Lead</p>
                    <p>Paragraph</p>
                    <span class="badge badge-dark">badge</span>
                </div>
                <div class="col-xl-8 text-right">
                    <p class="display-4 text-truncate">Display 4</p>
                    <p class="display-3 text-truncate">Display 3</p>
                    <p class="display-2 text-truncate">Display 2</p>
                    <p class="display-1 text-truncate">Display 1</p>
                </div>
            </div>
        </section>
        <section id="forms" class="container pb-5">
            <div class="row">
                <div class="col-md-12">
                    <form role="form">
                        <div class="form-group row">
                            <label class="col-md-2 col-form-label form-control-label text-muted">First</label>
                            <div class="col-md-4">
                                <input class="form-control" type="text" value="Jane">
                            </div>
                            <label class="col-md-1 col-form-label form-control-label text-muted">Last</label>
                            <div class="col-md-5">
                                <input class="form-control" type="text" value="Bishop">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-lg-2 col-form-label form-control-label text-muted">Address</label>
                            <div class="col-lg-10">
                                <input class="form-control" type="text" placeholder="Street">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-lg-2 col-form-label form-control-label text-muted"></label>
                            <div class="col-lg-6">
                                <input class="form-control" type="text" placeholder="City">
                            </div>
                            <div class="col-lg-4">
                                <select class="form-control">
                                    <option>State</option>
                                    <option>AK</option>
                                    <option>AZ</option>
                                    <option>CA</option>
                                    <option>CO</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group row was-validated">
                            <label class="col-lg-2 col-form-label form-control-label text-muted">Username</label>
                            <div class="col-lg-10">
                                <input class="form-control" type="text" required="" id="un" name="un">
                                <div class="invalid-feedback">
                                  Username is required.
                                </div>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-lg-2 col-form-label form-control-label"></label>
                            <div class="col-lg-10">
                                <input type="reset" class="btn btn-outline-secondary mr-2" value="Cancel">
                                <input type="button" class="btn btn-primary mr-2" value="Submit">
                                <div class="custom-control custom-checkbox d-inline">
                                  <input type="checkbox" class="custom-control-input" id="customCheck" checked>
                                  <label class="custom-control-label" for="customCheck">Check me out</label>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </section>
        <section id="grid" class="container pb-5">
            <p class="lead">The rows &amp; columns of the world famous Bootstrap grid speak for themselves.</p>
            <div class="row">
                <div class="col-sm-6">
                    6
                </div>
                <div class="col-6">
                    <div class="card my-1 bg-light">6</div>
                </div>
                <div class="col-sm-5">
                    5
                </div>
                <div class="col-7">
                    <div class="card my-1">7</div>
                </div>
                <div class="col-sm-4">
                    4
                </div>
                <div class="col-8">
                    <div class="card my-1">8</div>
                </div>
                <div class="col-sm-3">
                    3
                </div>
                <div class="col-9">
                    <div class="card my-1">9</div>
                </div>
                <div class="col-sm-2">
                    2
                </div>
                <div class="col-10">
                    <div class="card my-1">10</div>
                </div>
                <div class="col-sm-1">
                    1
                </div>
                <div class="col-11">
                    <div class="card my-1">11</div>
                </div>
            </div>
        </section>
        <section id="more" class="container pb-5">
            <div class="row">
                <div class="col-md-12">
                    <div class="table-responsive">
                        <table class="table table-hover table-sm">
                            <tbody>
                                <tr>
                                    <th class="w-25">Location</th>
                                    <th class="w-50">Date</th>
                                    <th class="w-25">Visits</th>
                                </tr>
                                <tr>
                                    <td>Westfield</td>
                                    <td>08.05.18 <span class="badge badge-primary">badge</span></td>
                                    <td>2323</td>
                                </tr>
                                <tr>
                                    <td>Galway</td>
                                    <td>08.05.18 <span class="badge badge-pill badge-primary">badge-pill</span></td>
                                    <td>5362</td>
                                </tr>
                                <tr class="table-primary">
                                    <td>Bern</td>
                                    <td>08.05.18</td>
                                    <td>153</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="w-100 my-4"></div>
                <div class="col-md-8">
                    <a href="#" class="text-primary" data-toggle="tooltip" data-placement="right" title="This tooltip is on the right.">Right tooltip (hover)</a>
                    <br>
                    <a href="#" class="text-primary" data-toggle="tooltip" data-placement="bottom" title="This tooltip is on the bottom.">Bottom tooltip (hover)</a>
                    <br>
                </div>
                <div class="col-md-4 text-right">
                    <!--
                    <div class="px-4 p-2 rounded bg-primary text-light" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">
                        Toggle my popover
                    </div>-->
                    <button type="button" class="btn btn-lg btn-primary" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Toggle my popover</button>
                </div>
                <div class="w-100 my-4"></div>
                <div class="col-md-12">
                    <div class="progress mb-2">
                        <div class="progress-bar bg-primary w-25" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"> </div>
                    </div>
                </div>
                <div class="col-md-12">
                    <div class="alert alert-primary alert-dismissable show fade" role="alert">
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">×</span>
                        </button>
                        <strong>Well done!</strong> You successfully read this important alert message.
                    </div>
                </div>
                <div class="w-100 my-4"></div>
            </div>
        </section>
    </main>
        <footer id="footer" class="bg-dark text-light py-5">
        <div class="container py-5">
            <div class="row">
                <div class="col-6 col-md-6 col-lg-3 mb-2">
                    <h6 class="text-uppercase">Tools</h6>
                    <ul class="nav flex-column">
                        <li><a class="text-white" target="ext" rel="nofollow" href="https://themestr.app" title="Bootstrap theme builder">Themestr.app</a></li>
                        <li><a class="text-white" target="ext" rel="nofollow" href="http://themes.guide" title="Bootstrap free and pro themes">Themes.guide</a></li>
                        <li><a class="text-white" target="ext" rel="nofollow" href="http://codeply.com" title="Prototype and edit code for Bootstrap and other responsive frameworks">Codeply</a></li>
                        <li><a class="text-white" target="ext" rel="nofollow" href="http://bootply.com">Bootply</a></li>
                    </ul>
                </div>
                <div class="col-6 col-md-6 col-lg-3 mb-2">
                    <h6 class="text-uppercase">More</h6>
                    <ul class="nav flex-column">
                        <li><a class="text-white" target="_new" href="http://wdstack.com" title="The top projects, tools and apps for Web developers">WDStack</a></li>
                        <li><a class="text-white" target="_new" href="http://theme.cards">Theme.cards</a></li>
                        <li><a class="text-white" target="_new" href="http://www.bootbundle.com">BootBundle</a></li>
                        <li><a class="text-white" target="_new" title="Learn about Bootstrap 4 using this free theme" href="http://bootstrap4.guide">Bootstrap4.guide</a></li>
                    </ul>
                </div>
                <div class="col-12 col-md-12 col-lg-6 mb-2 text-right">
                    <h6 class="text-uppercase">Follow</h6>
                    <ul class="nav float-right">
                        <li><a class="text-white mr-2" rel="nofollow" href="http://twitter.com/ThemesGuide" title="Follow on Twitter"><i class="h1 fa fa-fw fa-twitter fa-2x ion-logo-twitter"></i></a></li>
                        <li><a class="text-white mr-2" rel="nofollow" href="https://www.facebook.com/codeply" title="Follow on Facebook"><i class="h1 fa fa-fw fa-facebook fa-2x ion-logo-facebook"></i></a></li>
                        <li><a class="text-white mr" rel="nofollow" href="https://github.com/ThemesGuide/bootstrap-themes" title="Follow on GitHub"><i class="h1 fa fa-fw fa-facebook fa-2x ion-logo-github"></i></a></li>
                    </ul>
                </div>
            </div>
            <!--/row-->
        </div>
    </footer> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.13.0/umd/popper.min.js"></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="scripts.js"></script>
</body>
</html>